<template>
  <div>
    <div class="placeholder">
      <van-row>
        <van-col span="12">
          <span style="padding-left:10px;">我的积分{{user.points}}</span>
        </van-col>
        <van-col span="12" style="text-align: right;">
          <span class="mall-detail" @click="handleUseRecord">兑换记录</span>
        </van-col>
      </van-row>
    </div>
    <div>
      <div class="grid" hover-class="grid_active" v-for="(item,index) in pointsMallProducts" :key="index" @click="handlePointsMall(item)">
        <image class="grid-img" :src="item.picture_url">
          <!--<text class="grid-rest">剩余400</text>-->
        </image>
        <div class="grid-item" style="padding-top:5px;">{{item.title}}</div>
        <div class="grid-item"><text style="font-weight: bold;">{{item.mall_points}}</text> 积分</div>
      </div>
    </div>
  </div>
</template>
<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      pointsMallProducts:[]
    }
  },
  computed: {
    ...mapGetters([
      'user',
    ])
  },
  beforeMount() {
    console.log('beforeMount')
    if (!this.user || !this.user.id) {
      // 用户未授权
      let url = 'get_user_info?callback_url=points_mall'
      wx.redirectTo({
        url: url
      })
      return
    }
  },
  async mounted () {
    let result = await api.findPointsMallProducts({brand_id:this.user.brand_id})
    if (result.code == 0) {
      console.log('result=>',result)
      this.pointsMallProducts = result.data
    }
  },
  methods: {
    handlePointsMall(item){
      this.$store.dispatch("setPointsMallProduct",item)
      wx.navigateTo({url: 'points_product_detail'})
    },
    handleUseRecord(){
      wx.navigateTo({url: 'points_use_record'})
    }
  }
}
</script>

<style scoped>
.mall-detail{
  border:1px solid #8F8F8F;
  border-radius: 5px;
  padding: 2px 5px;
  margin-right: 10px;
  font-size: 14px;
}
.placeholder{
  background: #E5E5E5;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.grid{
  position:relative;
  float:left;
  width:50%;
  box-sizing:border-box;
  border-right:1px solid #d9d9d9;
  border-bottom:1px solid #d9d9d9
}
.grid-img{
  position: relative;
  width: 100%;
  height: 150px;
}
.grid-item{
  padding-left: 10px;
  padding-bottom: 8px;
}
.grid-rest{
  background: #E5E5E5;
  padding: 2px 5px;
  color: white;
  font-size: 15px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.grid_active{
  background-color:#ececec
}
</style>
